<template>
  <div class="cate-shop-container">
    <header class="c-s-h flex-item-center">
      <div class="csh-l">
        <ul class=" cshl-ul">
          <li v-for="(menu, i) in menuList" :key="i" :class="['menu-item', i===index1?'highlight': '']" @click.stop="toggleCate(menu, i)">{{menu.name}}</li>
        </ul>
      </div>
      <span class="iconfont icon-xiajiantou_huaban" @click.stop="showPopupMores"></span>
    </header>
    <rst-list :list="rstList" style="padding-top: 80px;" />
    <div class="popup-more" v-if="showPopupMore">
      <header class="more-h flex-row-sb-center">
        <h3>请选择分类</h3>
        <span class="iconfont icon-shanchu" @click="showPopupMore = false"></span>
      </header>
      <div class="more-m">
        <aside class="more-menu_item">
          <ul class="item-ul">
            <li v-for="(item, i) in allCateList" :key="i" :class="['item-li flex-row-sb-center', i === index2?'is-selected_more':'']" @click.stop="selectedThis(i, item)">
              <span class="menu-item_name">{{item.name}}</span>
              <span class="menu-item_count">{{item.count}}</span>
            </li>
          </ul>
        </aside>
        <section class="more-menu_subitem">
          <ul class="item-ul" style="border-right: none;">
            <li class="item-li flex-row-sb-center" v-for="(item, i) in subMenuList" :key="i" @click.stop="selectThis(i, item)">
              <div :class="[i === index3?'is-selected_subItem': '']">
                <img-format v-if="item.image_url" :src="item.image_url" class="scr-img" />
                <img-format v-else src="a7ca7e9e5aa15b1b8fc6f1bece8ee385jpeg" />
                <span style="margin-left: 20px;">{{item.name}}</span>
              </div>
              <span :class="['menu-item_count', i === index3? 'is-selected_count': '']">{{item.count}}</span>
            </li>
          </ul>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
import { getCateShop, getNearbyRestaurant, getAllCate } from '@/api/elm-data'
import ImgFormat from '_c/imgFormat/ImgFormat.vue'
import RstList from '_c/rstList/RstList.vue'
export default {
  name: 'cate-shop',
  data() {
    return {
      req: {
        latitude: '',
        longitude: '',
        id: ''
      },
      menuList: [],
      index1: 0,
      rstId: [],
      rstList: [],
      showPopupMore: false,
      allCateList: [],
      index2: 0,
      subMenuList: [],
      index3: 0
    }
  },
  components: {
    ImgFormat,
    RstList
  },
  async created() {
    this.req.id = this.$route.query.id
    this.req.latitude = JSON.parse(window.sessionStorage.getItem('Geo')).latitude
    this.req.longitude = JSON.parse(window.sessionStorage.getItem('Geo')).longitude
    if(this.$route.query.fromPath === 'index') {
      const { data } = await getCateShop(this.req)
      console.log(data)
      this.menuList = data
      if(data.length > 0) {
        this.rstId = data[0].restaurant_category_ids
        this.getRst(this.req)
      }else {
        this.$toast('商家不存在的分类')
      }
    }
  },
  methods: {
    toggleCate(item, i = 0) {
      this.index1 = i
      this.rstId = item.restaurant_category_ids
      this.getRst(this.req)
    },
    async getRst(req) {
      this.rstList = []
      let params = ''
      this.rstId.forEach(item => {
        params += '&restaurant_category_ids[]=' + item
      })
      try {
        const { data: res } = await getNearbyRestaurant(req, params)
        console.log(res)
        if(res.items && res.items.length > 0) {
          res.items.forEach(item => {
            this.rstList.push(item)
          })
        }else {
          this.$toast('商家迷路了，换一个试试看')
        }
      }catch(e) {
        this.$toast('请耐心等待，商家正在火速赶往现场', 'center')
      }
    },
    async showPopupMores() {
      this.subMenuList = []
      const { data } = await getAllCate(this.req)
      this.allCateList = data.splice(1).filter(item => {
        return item.count > 0
      })
      this.selectedThis(0, this.allCateList[0])
      this.showPopupMore = true
    },
    selectedThis(i, item) {
      this.index2 = i
      this.subMenuList = item.sub_categories.filter(item => {
       return item.count > 0
      })
    },
    async selectThis(i, item) {
      this.index3 = i
      let params = '&restaurant_category_ids[]=' + item.id
      const { data } = await getNearbyRestaurant(this.req, params)
      if(data.items && data.items.length > 0) {
        this.rstList = data.items
      }else {
        this.$toast('休息会儿吧，附近商家都打烊了')
      }
      this.showPopupMore = false
    }
  }
}
</script>

<style scoped lang="less">
  .cate-shop-container {
    min-height: 100vh;
    background-color: #fff;
  }
  .c-s-h {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 10px 0;
    background-color: #0097FF;
    color: #c5e6ff;
    z-index: 5;
  }
  .csh-l {
    width: 90%;
    box-shadow: -1px 0 0 #999 inset;
    overflow-x: scroll;
  }
  .cshl-ul {
    display: flex;
    margin: 0;
    padding: 0;
  }
  .csh-l::-webkit-scrollbar {
    width: 0;
  }
  .icon-xiajiantou_huaban {
    width: 10%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 32px;
  }
  .menu-item {
    margin: 0 20px;
    padding: 10px 0;
    font-size: 28px;
    white-space: nowrap;
    border-bottom: 4px solid transparent;
  }
  .highlight {
    color: #fff;
    border-bottom: 4px solid #fff;
  }
  .popup-more {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
  }
  .more-h {
    padding: 0 20px;
    background-color: #f9f9f9;
    font-size: 24px;
    color: #666;
  }
  .icon-shanchu {
    font-size: 28px;
  }
  .more-m {
    display: flex;
  }
  .more-menu_item {
    width: 40%;
    background-color: #fcfcfc;
  }
  .more-menu_subitem {
    width: 60%;
    background-color: #fff;
  }
  .item-ul {
    margin: 0;
    padding: 0;
    height: 800px;
    border-right: 1px solid #999;
    overflow-y: scroll;
  }
  .item-li {
    padding: 30px 20px;
    font-size: 24px;
    color: #666;
  }
  .menu-item_count {
    padding: 2px 12px;
    border: 1px solid #d4d4d4;
    border-radius: 10px;
    font-size: 20px;
    color: #bebebe;
  }
  .is-selected_more {
    background-color: #fff;
  }
  .is-selected_subItem {
    color: #0097FF;
    font-weight: 600;
  }
  .is-selected_count {
    font-weight: 600;
    color: #fff;
    background-color: #0097FF;
  }
  .scr-img {
    height: 80px;
    width: 80px;
  }
</style>
